WebCodecs வீடியோஃபிரேம் பிளேன் அணுகல்: மூல வீடியோ தரவைக் கையாளுவதற்கான ஒரு ஆழமான பார்வை

பல ஆண்டுகளாக, இணைய உலாவியில் உயர் செயல்திறன் கொண்ட வீடியோ செயலாக்கம் என்பது ஒரு தொலைதூரக் கனவாகவே இருந்தது. டெவலப்பர்கள் பெரும்பாலும் <video> உறுப்பு மற்றும் 2D கேன்வாஸ் ஏபிஐ-யின் வரம்புகளுக்குள் கட்டுப்படுத்தப்பட்டிருந்தனர். இவை சக்திவாய்ந்தவை என்றாலும், செயல்திறன் தடைகளை ஏற்படுத்தின மற்றும் அடிப்படை மூல வீடியோ தரவிற்கான அணுகலைக் கட்டுப்படுத்தின. WebCodecs ஏபிஐ-யின் வருகை இந்த நிலையை அடியோடு மாற்றியுள்ளது, இது உலாவியின் உள்ளமைக்கப்பட்ட மீடியா கோடெக்குகளுக்கு குறைந்த-நிலை அணுகலை வழங்குகிறது. இதன் மிகவும் புரட்சிகரமான அம்சங்களில் ஒன்று, VideoFrame பொருள் மூலம் தனிப்பட்ட வீடியோ ஃபிரேம்களின் மூலத் தரவை நேரடியாக அணுகவும் கையாளவும் முடியும் என்பதாகும்.

இந்தக் கட்டுரை, சாதாரண வீடியோ பிளேபேக்கைத் தாண்டிச் செல்ல விரும்பும் டெவலப்பர்களுக்கான ஒரு விரிவான வழிகாட்டியாகும். நாங்கள் VideoFrame பிளேன் அணுகலின் நுணுக்கங்களை ஆராய்வோம், வண்ண வெளிகள் மற்றும் நினைவக அமைப்பு போன்ற கருத்துக்களை தெளிவுபடுத்துவோம், மேலும் நிகழ்நேர ஃபில்டர்கள் முதல் அதிநவீன கணினிப் பார்வை பணிகள் வரை, அடுத்த தலைமுறை உலாவி-சார்ந்த வீடியோ பயன்பாடுகளை உருவாக்க உங்களுக்கு அதிகாரம் அளிக்கும் நடைமுறை எடுத்துக்காட்டுகளை வழங்குவோம்.

முன் தேவைகள்

இந்த வழிகாட்டியிலிருந்து அதிகப் பலனைப் பெற, நீங்கள் பின்வருவனவற்றில் உறுதியான புரிதலைக் கொண்டிருக்க வேண்டும்:

• நவீன ஜாவாஸ்கிரிப்ட்: ஒத்திசைவற்ற புரோகிராமிங் (async/await, Promises) உட்பட.
• அடிப்படை வீடியோ கருத்துக்கள்: ஃபிரேம்கள், தெளிவுத்திறன் மற்றும் கோடெக்குகள் போன்ற சொற்களுடன் பரிச்சயம் இருப்பது உதவியாக இருக்கும்.
• உலாவி ஏபிஐ-கள்: கேன்வாஸ் 2D அல்லது WebGL போன்ற ஏபிஐ-களுடன் அனுபவம் இருப்பது நன்மை பயக்கும், ஆனால் கண்டிப்பாகத் தேவையில்லை.

வீடியோ ஃபிரேம்கள், வண்ண வெளிகள் மற்றும் பிளேன்களைப் புரிந்துகொள்ளுதல்

நாம் ஏபிஐ-க்குள் நுழைவதற்கு முன், ஒரு வீடியோ ஃபிரேமின் தரவு உண்மையில் எப்படி இருக்கும் என்பதற்கான ஒரு உறுதியான மன மாதிரியை உருவாக்க வேண்டும். ஒரு டிஜிட்டல் வீடியோ என்பது அசையாப் படங்கள் அல்லது ஃபிரேம்களின் தொடராகும். ஒவ்வொரு ஃபிரேமும் பிக்சல்களின் ஒரு கட்டம், மற்றும் ஒவ்வொரு பிக்சலுக்கும் ஒரு நிறம் உண்டு. அந்த நிறம் எவ்வாறு சேமிக்கப்படுகிறது என்பது வண்ண வெளி மற்றும் பிக்சல் வடிவம் ஆகியவற்றால் வரையறுக்கப்படுகிறது.

RGBA: இணையத்தின் தாய்மொழி

பெரும்பாலான வலை உருவாக்குநர்கள் RGBA வண்ண மாதிரிக்கு நன்கு பரிச்சயமானவர்கள். ஒவ்வொரு பிக்சலும் நான்கு கூறுகளால் குறிக்கப்படுகிறது: சிவப்பு, பச்சை, நீலம் மற்றும் ஆல்பா (ஒளிபுகு தன்மை). தரவு பொதுவாக நினைவகத்தில் இணைந்து சேமிக்கப்படுகிறது, அதாவது ஒரு பிக்சலுக்கான R, G, B மற்றும் A மதிப்புகள் தொடர்ச்சியாக சேமிக்கப்படுகின்றன:

[R1, G1, B1, A1, R2, G2, B2, A2, ...]

இந்த மாதிரியில், முழு படமும் நினைவகத்தின் ஒரே, தொடர்ச்சியான தொகுதியில் சேமிக்கப்படுகிறது. இதை நாம் தரவின் ஒற்றை "பிளேன்" கொண்டிருப்பதாக நினைக்கலாம்.

YUV: வீடியோ சுருக்கத்தின் மொழி

இருப்பினும், வீடியோ கோடெக்குகள் அரிதாகவே RGBA உடன் நேரடியாக வேலை செய்கின்றன. அவை YUV (அல்லது இன்னும் துல்லியமாக, Y'CbCr) வண்ண வெளிகளை விரும்புகின்றன. இந்த மாதிரி படத் தகவலைப் பிரிக்கிறது:

• Y (Luma): பிரகாசம் அல்லது கிரேஸ்கேல் தகவல். மனிதக் கண் லுமாவில் ஏற்படும் மாற்றங்களுக்கு மிகவும் உணர்திறன் கொண்டது.
• U (Cb) மற்றும் V (Cr): குரோமினன்ஸ் அல்லது வண்ண-வேறுபாடு தகவல். மனிதக் கண் பிரகாச விவரங்களை விட வண்ண விவரங்களுக்கு குறைந்த உணர்திறன் கொண்டது.

இந்தப் பிரிப்பு திறமையான சுருக்கத்திற்கு முக்கியமானது. U மற்றும் V கூறுகளின் தெளிவுத்திறனைக் குறைப்பதன் மூலம்—குரோமா சப்சேம்ப்ளிங் எனப்படும் ஒரு நுட்பம்—நாம் தரத்தில் குறைந்தபட்ச உணரக்கூடிய இழப்புடன் கோப்பு அளவை கணிசமாகக் குறைக்க முடியும். இது பிளானார் பிக்சல் வடிவங்களுக்கு வழிவகுக்கிறது, அங்கு Y, U மற்றும் V கூறுகள் தனித்தனி நினைவகத் தொகுதிகளில் அல்லது "பிளேன்களில்" சேமிக்கப்படுகின்றன.

ஒரு பொதுவான வடிவம் I420 (ஒரு வகை YUV 4:2:0) ஆகும், அங்கு ஒவ்வொரு 2x2 பிக்சல் தொகுதிக்கும், நான்கு Y மாதிரிகள் உள்ளன, ஆனால் ஒரே ஒரு U மற்றும் ஒரு V மாதிரி மட்டுமே உள்ளது. இதன் பொருள் U மற்றும் V பிளேன்கள் Y பிளேனின் அரை அகலம் மற்றும் அரை உயரத்தைக் கொண்டுள்ளன.

இந்த வேறுபாட்டைப் புரிந்துகொள்வது மிகவும் முக்கியமானது ஏனெனில் WebCodecs உங்களுக்கு இந்த பிளேன்களுக்கு, டிகோடர் அவற்றை வழங்குவது போலவே, நேரடி அணுகலை வழங்குகிறது.

VideoFrame பொருள்: பிக்சல் தரவிற்கான உங்கள் நுழைவாயில்

இந்த புதிரின் மையப் பகுதி VideoFrame பொருள் ஆகும். இது ஒரு வீடியோவின் ஒற்றை ஃபிரேமைக் குறிக்கிறது மற்றும் பிக்சல் தரவை மட்டுமல்ல, முக்கியமான மெட்டாடேட்டாவையும் கொண்டுள்ளது.

VideoFrame-இன் முக்கிய பண்புகள்

• format: பிக்சல் வடிவத்தைக் குறிக்கும் ஒரு சரம் (எ.கா., 'I420', 'NV12', 'RGBA').
• codedWidth / codedHeight: கோடெக்கிற்குத் தேவைப்படும் எந்த பேடிங்கையும் உள்ளடக்கி, நினைவகத்தில் சேமிக்கப்பட்டுள்ள ஃபிரேமின் முழு பரிமாணங்கள்.
• displayWidth / displayHeight: ஃபிரேமைக் காண்பிக்கப் பயன்படுத்தப்பட வேண்டிய பரிமாணங்கள்.
• timestamp: ஃபிரேமின் விளக்கக்காட்சி நேர முத்திரை மைக்ரோ விநாடிகளில்.
• duration: ஃபிரேமின் கால அளவு மைக்ரோ விநாடிகளில்.

மாயாஜால முறை: copyTo()

மூல பிக்சல் தரவை அணுகுவதற்கான முதன்மை முறை videoFrame.copyTo(destination, options) ஆகும். இந்த ஒத்திசைவற்ற முறை, ஃபிரேமின் பிளேன் தரவை நீங்கள் வழங்கும் ஒரு இடையகத்திற்கு நகலெடுக்கிறது.

• destination: தரவை வைத்திருக்க போதுமான அளவு பெரிய ஒரு ArrayBuffer அல்லது ஒரு தட்டச்சு செய்யப்பட்ட வரிசை (Uint8Array போன்றவை).
• options: எந்த பிளேன்களை நகலெடுக்க வேண்டும் மற்றும் அவற்றின் நினைவக அமைப்பைக் குறிப்பிடும் ஒரு பொருள். இது தவிர்க்கப்பட்டால், அது அனைத்து பிளேன்களையும் ஒரே தொடர்ச்சியான இடையகத்திற்கு நகலெடுக்கிறது.

இந்த முறை, ஃபிரேமில் உள்ள ஒவ்வொரு பிளேனுக்கும் ஒன்று வீதம், PlaneLayout பொருட்களின் வரிசையுடன் தீர்க்கப்படும் ஒரு Promise-ஐ வழங்குகிறது. ஒவ்வொரு PlaneLayout பொருளும் இரண்டு முக்கியமான தகவல்களைக் கொண்டுள்ளது:

• offset: இலக்கு இடையகத்திற்குள் இந்த பிளேனின் தரவு தொடங்கும் பைட் ஆஃப்செட்.
• stride: அந்த பிளேனுக்கான பிக்சல்களின் ஒரு வரிசையின் தொடக்கத்திற்கும் அடுத்த வரிசையின் தொடக்கத்திற்கும் இடையிலான பைட்டுகளின் எண்ணிக்கை.

ஒரு முக்கிய கருத்து: ஸ்ட்ரைடு மற்றும் அகலம்

குறைந்த-நிலை கிராபிக்ஸ் புரோகிராமிங்கிற்குப் புதிய டெவலப்பர்களுக்கு இது மிகவும் பொதுவான குழப்பங்களில் ஒன்றாகும். பிக்சல் தரவின் ஒவ்வொரு வரிசையும் ஒன்றன் பின் ஒன்றாக இறுக்கமாகப் பொதிந்துள்ளதாக நீங்கள் கருத முடியாது.

• அகலம் என்பது படத்தின் ஒரு வரிசையில் உள்ள பிக்சல்களின் எண்ணிக்கை.
• ஸ்ட்ரைடு (பிட்ச் அல்லது லைன் ஸ்டெப் என்றும் அழைக்கப்படுகிறது) என்பது நினைவகத்தில் ஒரு வரிசையின் தொடக்கத்திலிருந்து அடுத்த வரிசையின் தொடக்கத்திற்கான பைட்டுகளின் எண்ணிக்கை.

பெரும்பாலும், stride ஆனது width * bytes_per_pixel-ஐ விட அதிகமாக இருக்கும். CPU அல்லது GPU மூலம் வேகமான செயலாக்கத்திற்காக நினைவகம் வன்பொருள் எல்லைகளுடன் (எ.கா., 32- அல்லது 64-பைட் எல்லைகள்) சீரமைக்கப்படுவதற்கு இதுவே காரணமாகும். ஒரு குறிப்பிட்ட வரிசையில் உள்ள ஒரு பிக்சலின் நினைவக முகவரியைக் கணக்கிட நீங்கள் எப்போதும் ஸ்ட்ரைடைப் பயன்படுத்த வேண்டும்.

ஸ்ட்ரைடைப் புறக்கணிப்பது சிதைந்த அல்லது உருக்குலைந்த படங்களுக்கும் தவறான தரவு அணுகலுக்கும் வழிவகுக்கும்.

நடைமுறை எடுத்துக்காட்டு 1: ஒரு கிரேஸ்கேல் பிளேனை அணுகி காண்பித்தல்

ஒரு எளிய ஆனால் சக்திவாய்ந்த எடுத்துக்காட்டுடன் தொடங்குவோம். இணையத்தில் உள்ள பெரும்பாலான வீடியோக்கள் I420 போன்ற YUV வடிவத்தில் குறியாக்கம் செய்யப்பட்டுள்ளன. 'Y' பிளேன் திறம்பட படத்தின் ஒரு முழுமையான கிரேஸ்கேல் பிரதிநிதித்துவமாகும். நாம் இந்த பிளேனை மட்டும் பிரித்தெடுத்து அதை ஒரு கேன்வாஸில் ரெண்டர் செய்யலாம்.

asyn'c function displayGrayscale(videoFrame) {
  // வீடியோஃபிரேம் 'I420' அல்லது 'NV12' போன்ற YUV வடிவத்தில் இருப்பதாக நாம் கருதுகிறோம்.
  if (!videoFrame.format.startsWith('I4')) {
    console.error('இந்த எடுத்துக்காட்டுக்கு ஒரு YUV 4:2:0 பிளானார் வடிவம் தேவை.');
    videoFrame.close();
    return;
  }

  const yPlaneInfo = videoFrame.layout[0]; // Y பிளேன் எப்போதும் முதலாவதாக இருக்கும்.

  // Y பிளேன் தரவை மட்டும் வைத்திருக்க ஒரு இடையகத்தை உருவாக்கவும்.
  const yPlaneData = new Uint8Array(yPlaneInfo.stride * videoFrame.codedHeight);

  // Y பிளேனை நமது இடையகத்தில் நகலெடுக்கவும்.
  await videoFrame.copyTo(yPlaneData, {
    rect: { x: 0, y: 0, width: videoFrame.codedWidth, height: videoFrame.codedHeight },
    layout: [yPlaneInfo]
  });

  // இப்போது, yPlaneData மூல கிரேஸ்கேல் பிக்சல்களைக் கொண்டுள்ளது.
  // நாம் அதை ரெண்டர் செய்ய வேண்டும். கேன்வாஸிற்காக ஒரு RGBA இடையகத்தை உருவாக்குவோம்.
  const canvas = document.getElementById('my-canvas');
  canvas.width = videoFrame.displayWidth;
  canvas.height = videoFrame.displayHeight;
  const ctx = canvas.getContext('2d');
  const imageData = ctx.createImageData(canvas.width, canvas.height);

  // கேன்வாஸ் பிக்சல்கள் மீது மீண்டும் மீண்டும் சென்று அவற்றை Y பிளேன் தரவிலிருந்து நிரப்பவும்.
  for (let y = 0; y < videoFrame.displayHeight; y++) {
    for (let x = 0; x < videoFrame.displayWidth; x++) {
      // முக்கியம்: சரியான மூல குறியீட்டைக் கண்டுபிடிக்க ஸ்ட்ரைடைப் பயன்படுத்தவும்!
      const yIndex = y * yPlaneInfo.stride + x;
      const luma = yPlaneData[yIndex];

      // RGBA ImageData இடையகத்தில் இலக்கு குறியீட்டைக் கணக்கிடவும்.
      const rgbaIndex = (y * canvas.width + x) * 4;

      imageData.data[rgbaIndex] = luma;     // சிவப்பு
      imageData.data[rgbaIndex + 1] = luma; // பச்சை
      imageData.data[rgbaIndex + 2] = luma; // நீலம்
      imageData.data[rgbaIndex + 3] = 255;  // ஆல்பா
    }
  }

  ctx.putImageData(imageData, 0, 0);

  // மிக முக்கியம்: VideoFrame-ஐ அதன் நினைவகத்தை விடுவிக்க எப்போதும் மூடவும்.
  videoFrame.close();
}

இந்த எடுத்துக்காட்டு பல முக்கிய படிகளை எடுத்துக்காட்டுகிறது: சரியான பிளேன் அமைப்பை அடையாளம் காண்பது, ஒரு இலக்கு இடையகத்தை ஒதுக்குவது, தரவைப் பிரித்தெடுக்க copyTo பயன்படுத்துவது, மற்றும் ஒரு புதிய படத்தை உருவாக்க stride-ஐப் பயன்படுத்தி தரவை சரியாக மீண்டும் மீண்டும் செயலாக்குவது.

நடைமுறை எடுத்துக்காட்டு 2: ಸ್ಥಳத்திலேயே கையாளுதல் (செபியா வடிப்பான்)

இப்போது ஒரு நேரடி தரவுக் கையாளுதலைச் செய்வோம். செபியா வடிப்பான் ஒரு உன்னதமான விளைவு, அதைச் செயல்படுத்துவது எளிது. இந்த எடுத்துக்காட்டிற்கு, ஒரு RGBA ஃபிரேமுடன் வேலை செய்வது எளிதானது, அதை நீங்கள் ஒரு கேன்வாஸ் அல்லது WebGL சூழலிலிருந்து பெறலாம்.

async function applySepiaFilter(videoFrame) {
  // இந்த எடுத்துக்காட்டு உள்ளீட்டு ஃபிரேம் 'RGBA' அல்லது 'BGRA' என அனுமானிக்கிறது.
  if (videoFrame.format !== 'RGBA' && videoFrame.format !== 'BGRA') {
    console.error('செபியா வடிப்பான் எடுத்துக்காட்டுக்கு ஒரு RGBA ஃபிரேம் தேவை.');
    videoFrame.close();
    return null;
  }

  // பிக்சல் தரவை வைத்திருக்க ஒரு இடையகத்தை ஒதுக்கவும்.
  const frameDataSize = videoFrame.allocationSize();
  const frameData = new Uint8Array(frameDataSize);
  await videoFrame.copyTo(frameData);

  const layout = videoFrame.layout[0]; // RGBA என்பது ஒரு ஒற்றை பிளேன்

  // இப்போது, இடையகத்தில் உள்ள தரவைக் கையாளவும்.
  for (let y = 0; y < videoFrame.codedHeight; y++) {
    for (let x = 0; x < videoFrame.codedWidth; x++) {
      const pixelIndex = y * layout.stride + x * 4; // ஒரு பிக்சலுக்கு 4 பைட்டுகள் (R,G,B,A)

      const r = frameData[pixelIndex];
      const g = frameData[pixelIndex + 1];
      const b = frameData[pixelIndex + 2];

      const tr = 0.393 * r + 0.769 * g + 0.189 * b;
      const tg = 0.349 * r + 0.686 * g + 0.168 * b;
      const tb = 0.272 * r + 0.534 * g + 0.131 * b;

      frameData[pixelIndex] = Math.min(255, tr);
      frameData[pixelIndex + 1] = Math.min(255, tg);
      frameData[pixelIndex + 2] = Math.min(255, tb);
      // ஆல்பா (frameData[pixelIndex + 3]) மாறாமல் உள்ளது.
    }
  }

  // மாற்றியமைக்கப்பட்ட தரவுடன் ஒரு *புதிய* VideoFrame-ஐ உருவாக்கவும்.
  const newFrame = new VideoFrame(frameData, {
    format: videoFrame.format,
    codedWidth: videoFrame.codedWidth,
    codedHeight: videoFrame.codedHeight,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  // அசல் ஃபிரேமை மூட மறக்காதீர்கள்!
  videoFrame.close();

  return newFrame;
}

இது ஒரு முழுமையான படி-மாற்று-எழுது சுழற்சியை நிரூபிக்கிறது: தரவை வெளியே நகலெடுப்பது, ஸ்ட்ரைடைப் பயன்படுத்தி அதைச் சுற்றி வருவது, ஒவ்வொரு பிக்சலுக்கும் ஒரு கணித மாற்றத்தைப் பயன்படுத்துவது, மற்றும் விளைந்த தரவுடன் ஒரு புதிய VideoFrame-ஐ உருவாக்குவது. இந்த புதிய ஃபிரேமை பின்னர் ஒரு கேன்வாஸில் ரெண்டர் செய்யலாம், ஒரு VideoEncoder-க்கு அனுப்பலாம், அல்லது மற்றொரு செயலாக்கப் படிக்கு அனுப்பலாம்.

செயல்திறன் முக்கியம்: ஜாவாஸ்கிரிப்ட் மற்றும் வெப்அசெம்பிளி (WASM)

ஒவ்வொரு ஃபிரேமிற்கும் மில்லியன் கணக்கான பிக்சல்களை (ஒரு 1080p ஃபிரேமில் 2 மில்லியனுக்கும் அதிகமான பிக்சல்கள், அல்லது RGBA-வில் 8 மில்லியன் தரவுப் புள்ளிகள்) ஜாவாஸ்கிரிப்டில் மீண்டும் மீண்டும் செயலாக்குவது மெதுவாக இருக்கலாம். நவீன ஜாவாஸ்கிரிப்ட் இயந்திரங்கள் நம்பமுடியாத அளவிற்கு வேகமாக இருந்தாலும், உயர்-தெளிவுத்திறன் கொண்ட வீடியோவின் (HD, 4K) நிகழ்நேர செயலாக்கத்திற்கு, இந்த அணுகுமுறை பிரதான திரியை எளிதில் மூழ்கடித்து, ஒரு துண்டு துண்டான பயனர் அனுபவத்திற்கு வழிவகுக்கும்.

இங்குதான் வெப்அசெம்பிளி (WASM) ஒரு அத்தியாவசிய கருவியாகிறது. WASM உங்களை C++, Rust, அல்லது Go போன்ற மொழிகளில் எழுதப்பட்ட குறியீட்டை உலாவியில் ஏறக்குறைய நேட்டிவ் வேகத்தில் இயக்க அனுமதிக்கிறது. வீடியோ செயலாக்கத்திற்கான பணிப்பாய்வு பின்வருமாறு:

1. ஜாவாஸ்கிரிப்டில்: மூல பிக்சல் தரவை ஒரு ArrayBuffer-இல் பெற videoFrame.copyTo()-ஐப் பயன்படுத்தவும்.
2. WASM-க்கு அனுப்புதல்: இந்த இடையகத்திற்கான ஒரு குறிப்பை உங்கள் தொகுக்கப்பட்ட WASM தொகுதிக்கு அனுப்பவும். இது தரவை நகலெடுக்காததால் இது ஒரு மிக வேகமான செயல்பாடு.
3. WASM-இல் (C++/Rust): உங்கள் மிகவும் உகந்ததாக்கப்பட்ட பட செயலாக்க வழிமுறைகளை நினைவக இடையகத்தில் நேரடியாக இயக்கவும். இது ஒரு ஜாவாஸ்கிரிப்ட் சுழற்சியை விட பல மடங்கு வேகமானது.
4. ஜாவாஸ்கிரிப்டிற்குத் திரும்புதல்: WASM முடிந்ததும், கட்டுப்பாடு ஜாவாஸ்கிரிப்டிற்குத் திரும்பும். நீங்கள் பின்னர் மாற்றியமைக்கப்பட்ட இடையகத்தைப் பயன்படுத்தி ஒரு புதிய VideoFrame-ஐ உருவாக்கலாம்.

மெய்நிகர் பின்னணிகள், பொருள் கண்டறிதல், அல்லது சிக்கலான ஃபில்டர்கள் போன்ற எந்தவொரு தீவிரமான, நிகழ்நேர வீடியோ கையாளுதல் பயன்பாட்டிற்கும், வெப்அசெம்பிளியைப் பயன்படுத்துவது ஒரு விருப்பம் மட்டுமல்ல; அது ஒரு அவசியம்.

வெவ்வேறு பிக்சல் வடிவங்களைக் கையாளுதல் (எ.கா., I420, NV12)

RGBA எளிமையானதாக இருந்தாலும், நீங்கள் பெரும்பாலும் ஒரு VideoDecoder-இலிருந்து பிளானார் YUV வடிவங்களில் ஃபிரேம்களைப் பெறுவீர்கள். I420 போன்ற முழுமையான பிளானார் வடிவத்தை எவ்வாறு கையாள்வது என்று பார்ப்போம்.

I420 வடிவத்தில் உள்ள ஒரு VideoFrame அதன் layout வரிசையில் மூன்று அமைப்பு விவரிப்பான்களைக் கொண்டிருக்கும்:

• layout[0]: Y பிளேன் (லுமா). பரிமாணங்கள் codedWidth x codedHeight.
• layout[1]: U பிளேன் (குரோமா). பரிமாணங்கள் codedWidth/2 x codedHeight/2.
• layout[2]: V பிளேன் (குரோமா). பரிமாணங்கள் codedWidth/2 x codedHeight/2.

மூன்று பிளேன்களையும் ஒரே இடையகத்தில் எப்படி நகலெடுப்பது என்பது இங்கே:

async function extractI420Planes(videoFrame) {
  const totalSize = videoFrame.allocationSize({ format: 'I420' });
  const allPlanesData = new Uint8Array(totalSize);

  const layouts = await videoFrame.copyTo(allPlanesData);

  // layouts என்பது 3 PlaneLayout பொருட்களின் வரிசையாகும்
  console.log('Y பிளேன் அமைப்பு:', layouts[0]); // { offset: 0, stride: ... }
  console.log('U பிளேன் அமைப்பு:', layouts[1]); // { offset: ..., stride: ... }
  console.log('V பிளேன் அமைப்பு:', layouts[2]); // { offset: ..., stride: ... }

  // நீங்கள் இப்போது `allPlanesData` இடையகத்திற்குள் ஒவ்வொரு பிளேனையும்
  // அதன் குறிப்பிட்ட ஆஃப்செட் மற்றும் ஸ்ட்ரைடைப் பயன்படுத்தி அணுகலாம்.

  const yPlaneView = new Uint8Array(
    allPlanesData.buffer,
    layouts[0].offset,
    layouts[0].stride * videoFrame.codedHeight
  );

  // குரோமா பரிமாணங்கள் பாதியாக உள்ளன என்பதை கவனிக்கவும்!
  const uPlaneView = new Uint8Array(
    allPlanesData.buffer,
    layouts[1].offset,
    layouts[1].stride * (videoFrame.codedHeight / 2)
  );

  const vPlaneView = new Uint8Array(
    allPlanesData.buffer,
    layouts[2].offset,
    layouts[2].stride * (videoFrame.codedHeight / 2)
  );

  console.log('அணுகப்பட்ட Y பிளேன் அளவு:', yPlaneView.byteLength);
  console.log('அணுகப்பட்ட U பிளேன் அளவு:', uPlaneView.byteLength);

  videoFrame.close();
}

மற்றொரு பொதுவான வடிவம் NV12, இது செமி-பிளானார் ஆகும். இது இரண்டு பிளேன்களைக் கொண்டுள்ளது: ஒன்று Y-க்கு, மற்றும் இரண்டாவது பிளேன் U மற்றும் V மதிப்புகள் ஒன்றோடொன்று பிணைக்கப்பட்டுள்ளன (எ.கா., [U1, V1, U2, V2, ...]). WebCodecs ஏபிஐ இதை வெளிப்படையாகக் கையாள்கிறது; NV12 வடிவத்தில் உள்ள ஒரு VideoFrame அதன் layout வரிசையில் இரண்டு அமைப்புகளைக் கொண்டிருக்கும்.

சவால்கள் மற்றும் சிறந்த நடைமுறைகள்

இந்த குறைந்த மட்டத்தில் வேலை செய்வது சக்தி வாய்ந்தது, ஆனால் அது பொறுப்புகளுடன் வருகிறது.

நினைவக மேலாண்மை முதன்மையானது

ஒரு VideoFrame கணிசமான அளவு நினைவகத்தை வைத்திருக்கிறது, இது பெரும்பாலும் ஜாவாஸ்கிரிப்ட் குப்பை சேகரிப்பாளரின் குவியலுக்கு வெளியே நிர்வகிக்கப்படுகிறது. நீங்கள் இந்த நினைவகத்தை வெளிப்படையாக விடுவிக்கவில்லை என்றால், உலாவி தாவலை செயலிழக்கச் செய்யக்கூடிய ஒரு நினைவகக் கசிவை ஏற்படுத்துவீர்கள்.

ஒரு ஃபிரேமுடன் நீங்கள் முடித்ததும் எப்போதும், எப்போதும் videoFrame.close()-ஐ அழைக்கவும்.

ஒத்திசைவற்ற தன்மை

அனைத்து தரவு அணுகலும் ஒத்திசைவற்றது. உங்கள் பயன்பாட்டின் கட்டமைப்பு, பந்தய நிலைகளைத் தவிர்க்கவும், ஒரு மென்மையான செயலாக்க குழாய்த்தொடரை உறுதி செய்யவும் Promises மற்றும் async/await-இன் ஓட்டத்தை சரியாக கையாள வேண்டும்.

உலாவி இணக்கத்தன்மை

WebCodecs ஒரு நவீன ஏபிஐ. அனைத்து முக்கிய உலாவிகளிலும் ஆதரிக்கப்பட்டாலும், அதன் கிடைக்கும் தன்மையை எப்போதும் சரிபார்க்கவும் மற்றும் எந்தவொரு விற்பனையாளர்-குறிப்பிட்ட செயல்படுத்தல் விவரங்கள் அல்லது வரம்புகள் குறித்து அறிந்திருக்கவும். ஏபிஐ-ஐப் பயன்படுத்த முயற்சிக்கும் முன் அம்சக் கண்டறிதலைப் பயன்படுத்தவும்.

முடிவுரை: வலை வீடியோவிற்கான ஒரு புதிய எல்லை

WebCodecs ஏபிஐ வழியாக ஒரு VideoFrame-இன் மூல பிளேன் தரவை நேரடியாக அணுகவும் கையாளவும் முடியும் என்பது வலை அடிப்படையிலான மீடியா பயன்பாடுகளுக்கு ஒரு முன்னுதாரண மாற்றமாகும். இது <video> உறுப்பின் கருப்புப் பெட்டியை நீக்கி, டெவலப்பர்களுக்கு முன்னர் நேட்டிவ் பயன்பாடுகளுக்கு ஒதுக்கப்பட்டிருந்த நுணுக்கமான கட்டுப்பாட்டை வழங்குகிறது.

வீடியோ நினைவக அமைப்பின் அடிப்படைகளைப் புரிந்துகொள்வதன் மூலம்—பிளேன்கள், ஸ்ட்ரைடு மற்றும் வண்ண வடிவங்கள்—மற்றும் செயல்திறன்-முக்கியமான செயல்பாடுகளுக்கு வெப்அசெம்பிளியின் சக்தியைப் பயன்படுத்துவதன் மூலம், நீங்கள் இப்போது நம்பமுடியாத அளவிற்கு அதிநவீன வீடியோ செயலாக்க கருவிகளை நேரடியாக உலாவியில் உருவாக்க முடியும். நிகழ்நேர வண்ண தரம் மற்றும் தனிப்பயன் காட்சி விளைவுகள் முதல் கிளையன்ட் பக்க இயந்திர கற்றல் மற்றும் வீடியோ பகுப்பாய்வு வரை, சாத்தியக்கூறுகள் பரந்தவை. இணையத்தில் உயர்-செயல்திறன், குறைந்த-நிலை வீடியோவின் சகாப்தம் உண்மையிலேயே தொடங்கிவிட்டது.